<template>
  <div class="erer1">
      <ul class="erer">
          <li v-for="(v) in arr" :key="v.goodid" @click="fun(v.goodid)">
              <div class="lid"><img :src="v.img" alt=""></div>
              <div class="lid2">
                  <p class="pp1">{{v.title}}</p>
                  <span class="sp1">{{v.tu}}</span>
                  <span>{{v.nq}}</span>
                  <span>{{v.nw}}</span>
                  <span>{{v.nr}}</span>
                  <p class="pp2">{{v.nt}}</p>
                  <p class="pp3">{{v.ar}}</p>
                  <b class="bb1">{{v.price}}</b>
              </div>
          </li>
      </ul>
      <h2 class="oohh"></h2>
  </div>
</template>

<script>
export default {
    methods:{
        fun(goodid){
            this.$router.push({name:'all1zi',query:{goodids:goodid}})
        }
    },
    created(){
        //触发actions
        this.$store.dispatch("LINK_DATA","/mock/data")
    },
    computed:{
        arr(){
            // console.log(this.$store.state.er1m.data);
            return this.$store.state.er1m.arr

        }
    },
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
}
.erer1{
    width: 94%;
    height: 11.94rem;
    margin: auto;
}
.erer{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.erer li{
    width: 48%;
    height: 2.3rem;
    /* border: 1px solid red; */
    background: white;
    border-radius: .1rem;
}
.erer li:nth-child(n+3){
    margin-top: .13rem;
}
.erer li .lid{
    width: 100%;
    height: 1.25rem;
    /* border: 1px solid red; */
}
.erer li .lid img{
    width: 100%;
    height: 100%;
    border-radius: .13rem .13rem 0 0;
}
.erer li .lid2{
    width: 1.71rem;
    height: 1.05rem;
    /* border: 1px solid blue; */
    padding-left: .13rem;
}
.erer li .lid2 span{
    background: #edf2f8;
    color: #5f6fa0;
    border-radius: .03rem;
    margin-right: .03rem;
    font-size: .1rem;
}
.erer li .lid2 .sp1{
    background: #3fb4f9;
    color: white;
}
.erer li .pp1{
    height: .3rem;
    line-height: .3rem;
    font-weight: bold;
    /* background: yellowgreen; */
}
.erer li .pp2,
.erer li .pp3{
    height: .16rem;
    line-height: .14rem;
    font-size: .11rem;
    font-weight: bold;
}
.erer li .bb1{
    color: #f85842;
}
.oohh{
    width: 100%;
    height: .6rem;
    /* background: rgb(141, 140, 140); */
}
</style>
